<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<script type="text/javascript">
	var id;
	$(function(){
		
		$("#searchById").keyup(function(){
			$("#searchByIdView").html("");
			//alert("ㅠㅠㅠㅠㅠㅠ");
			
			if($(this).val().length>3){
				if($(this).val()=="${sessionScope.mvo.id}"){
					$("#searchByIdView").html("자기자신은 친구로 추가할수없어요");
					return;
				}
				 $.ajax({
					type:"post",
					url:"searchById.do",
					dataType:"json",	//JSON.parse()을 내부적으로 처리하여
					data:"search="+$(this).val(),
					success:function(jsonData){	// 매개변수로 인자값으로 전달
						//alert("ㅠㅠㅠㅠㅠㅠ");
						//alert(jsonData.str);
						var ss="";
						if(jsonData.str){
								id=jsonData.vo.id;
								ss+="<input type='button' value='추가' id='joinFriend'>";	
						}
						$("#searchByIdView").html(jsonData.str + ss);
					} 
				});// ajax
			}
		}); //keyup
		
		
		$('#searchByIdView').on("click", "#joinFriend", function(){
			location.href="joinFriend.do?myid=${sessionScope.mvo.id}&id="+id;
		});
		
	});// function
</script>
<h1>추천친구</h1>
<table border="1">
<tr>
<th></th><th>ID</th><th>Name</th><th>Grade</th>
</tr>
<c:forEach items="${requestScope.flist}" var="f">
<tr>
	<c:if test="${f.id!=sessionScope.mvo.id }">
		<td><input type="checkbox" name="friend"  value="${f.id}"></td>
		<td>${f.id }</td>
		<td>${f.name }</td>
		<td>${f.grade }</td>
	</c:if>
</tr>
</c:forEach>
</table>

<h2>친구찾기(검색)</h2>
ID : <input type="text" id="searchById"><br><br>
<span id="searchByIdView"></span>

